<template>
    <div>
        <div class="container">
            <div class="form-box">
                <el-form ref="projectServiceFormRef" :rules="rules" :model="projectServiceForm" :label-width="formLabelWidth">
                    <el-form-item label="ID" v-if="false">
                        <el-input v-model="projectServiceForm.id" placeholder="ID" clearable size="medium" style="width:350px"/>
                    </el-form-item>
                    <el-form-item label="主分类" prop="parentId">
                        <el-select v-model="projectServiceForm.parentId" placeholder="请选择" style="width:350px">
                            <el-option label="请选择" value=""></el-option>
                            <el-option v-for="(item, index) in parentId_Opts" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="服务项目名称" prop="projectName">
                        <el-input v-model="projectServiceForm.projectName" placeholder="名称" clearable size="medium" style="width:350px"/>
                    </el-form-item>
                    <el-form-item label="项目描述">
                        <el-input type="textarea" style="width:350px"
                        :autosize="{ minRows: 3, maxRows: 5}" v-model="projectServiceForm.projectDecs" placeholder="项目描述">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="项目类型" prop="projectType">
                        <el-select v-model="projectServiceForm.projectType" placeholder="请选择" style="width:350px">
                            <el-option label="请选择" value="" />
                            <el-option v-for="(item,index) in projectType_Opts" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="服务用时" prop="needTimeNum">
                        <el-input-number v-model="needTimeNum" :min="10" :max="100" :step="5" />
                    </el-form-item>
                    <el-form-item label="启用状态">
                        <el-switch v-model="projectServiceForm.disable" class="handle-switch mr40"
                            placeholder="启用状态"
                            :active-value= "1" :inactive-value= "0"
                            active-color="#13ce66" inactive-color="#ff4949" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button @click="onReset">重置表单</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from "element-plus";
import { findServiceProjectListPage, findServiceProjectById, findServiceProjectParentList, fetchProjectTreeData, saveServiceProject,
configServiceProjectDisable } from "../../../api/hairmanager/project";
import { findDictionaryInfoByDicCode } from "../../../api/dict";
export default {
    name: "projectServiceForm",
    setup() {
        const router = useRouter();
        const SUCCMESS_ADDDATA_DIALOG_MESSAGE = "添加数据成功";
        const formLabelWidth = ref("170px");
		let parentId_Opts = ref([]);
		let projectType_Opts = ref([]);
        let needTimeNum = ref(0);
        const projectServiceFormRef = ref(null);
        let projectServiceForm = reactive({
            id: 0,
            parentId: "",
            projectName: "",
            projectDecs: "",
            projectType: "",
            needTime: 0,
            disable: 0,
        });
        const rules = {
            projectName: [
                { required: true, message: "请输入服务项目名称", trigger: "blur" },
            ],
            parentId: [
                { required: true, message: "请选择服务大项", trigger: "blur" },
            ],
            projectType: [
                { required: true, message: "请选择服务项目类型", trigger: "blur" },
            ],
        };
// =========================================================================================
		const func_getParentIDOpt = () => {
			findServiceProjectParentList().then((res) => {
				parentId_Opts.value = res.data;
			});
		}
		const func_getOptData = () => {
			let obj = {'dicCode':200};
			findDictionaryInfoByDicCode(obj).then((res) => {
				let vos = res.data.dictionaryVoList;
				vos.forEach(element => {
					projectType_Opts.value.push(
					{
						'label': element['dicName'],
						'value': element['dicCode']
					});
				});
			});
		};
		func_getOptData();
		func_getParentIDOpt();
        // 提交
        const onSubmit = () => {
            // 表单校验
            projectServiceFormRef.value.validate((valid) => {
                if (valid) {
                    // console.log(projectServiceForm);
                    func_saveDialogEdit();
                } else {
                    return false;
                }
            });
        };
        /**
         * @name 保存服务项目配置
         */
        const func_saveDialogEdit = () => {
			projectServiceForm.needTime = needTimeNum;
            saveServiceProject(projectServiceForm).then((res) => {
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success(SUCCMESS_ADDDATA_DIALOG_MESSAGE);
                    router.push("/serviceProject");
                }
            });
        };
        // 重置
        const onReset = () => {
            projectServiceFormRef.value.resetFields();
        };
        return {
            rules, projectServiceFormRef, formLabelWidth, needTimeNum,
            parentId_Opts, projectType_Opts, projectServiceForm,
            func_getParentIDOpt,
            onSubmit, onReset,
        };
    },
};
</script>